<template>
  <div class="image-evaluation">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="index" label="#" width="80" />
      <el-table-column label="图像" width="450">
        <template #default="scope">
          <div class="image-comparison">
            <div class="image-container">
              <img :src="scope.row.originalImage" :alt="`原始图像 ${scope.row.index}`">
              <div class="image-label">原始图像</div>
            </div>
            <div class="image-container">
              <img :src="scope.row.segmentedImage" :alt="`分割图像 ${scope.row.index}`">
              <div class="image-label">分割结果</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dice" label="DICE" min-width="90" sortable>
        <template #default="scope">
          {{ scope.row.dice.toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column prop="jh" label="JH" min-width="90" sortable>
        <template #default="scope">
          {{ scope.row.jh.toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column prop="hd" label="HD" min-width="90" sortable>
        <template #default="scope">
          {{ scope.row.hd.toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column prop="asd" label="ASD" min-width="90" sortable>
        <template #default="scope">
          {{ scope.row.asd.toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column prop="precision" label="Precision" min-width="90" sortable>
        <template #default="scope">
          {{ scope.row.precision.toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column prop="recall" label="Recall" min-width="90" sortable>
        <template #default="scope">
          {{ scope.row.recall.toFixed(4) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import image01 from '@/assets/01.png'
import image02 from '@/assets/02.png'
import image03 from '@/assets/03.png'
import image04 from '@/assets/04.png'

interface TableItem {
  index: string;
  originalImage: string;
  segmentedImage: string;
  dice: number;
  jh: number;
  hd: number;
  asd: number;
  precision: number;
  recall: number;
}

const tableData = ref<TableItem[]>([
  { 
    index: '图1\n1.png', 
    originalImage: image01, 
    segmentedImage: image01, 
    dice: 0.7456,
    jh: 0.5944,
    hd: 54.0093,
    asd: 0.9456,
    precision: 0.7531,
    recall: 0.7383
  },
  { 
    index: '图2\n2.png', 
    originalImage: image02, 
    segmentedImage: image02, 
    dice: 0.7765,
    jh: 0.6346,
    hd: 60.6383,
    asd: 0.8047,
    precision: 0.9030,
    recall: 0.6811
  },
  { 
    index: '图3\n3.png', 
    originalImage: image03, 
    segmentedImage: image03, 
    dice: 0.3750,
    jh: 0.2308,
    hd: 41.7732,
    asd: 3.4718,
    precision: 0.3976,
    recall: 0.3976
  },
  { 
    index: '图4\n4.png', 
    originalImage: image04, 
    segmentedImage: image04, 
    dice: 0.7498,
    jh: 0.5938,
    hd: 67.6757,
    asd: 1.5211,
    precision: 0.8584,
    recall: 0.6656
  }
])
</script>

<style scoped>
.image-evaluation {
  width: 100%;
  overflow-x: auto;
}

.image-comparison {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  padding: 5px;
}

.image-container {
  flex: 1;
  text-align: center;
  max-width: 180px;
}

.image-container img {
  width: 100%;
  max-width: 180px;
  height: 135px;
  object-fit: cover;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.image-label {
  margin-top: 8px;
  color: #606266;
  font-size: 14px;
}

:deep(.el-table .cell) {
  white-space: pre-line;
  text-align: center;
}

:deep(.el-table) {
  width: 100% !important;
}
</style> 